<template>
	<div>
		<view class="margin">

			<view class="">
				<u-row>
					<u-col span="11">
					</u-col>
					<u-col span="1" @click="toGroupInfo()">
						<u-icon name="list" size="23"></u-icon>
					</u-col>
				</u-row>
				<u-gap height="20" bgColor=""></u-gap>
				<u-row>
					<u-col span="3">
						<h2>群成员</h2>
					</u-col>
					<u-col span="7">

					</u-col>
					<u-col span="2">
						<view class="flexflex flex-end">
							<view class="flexflex flex-align">
								<h4>共{{list.length}}人</h4>
								<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-gap height="20" bgColor=""></u-gap>
			<!-- 3 -->
			<view class="">
				<u-row>
					<u-col span="10">
						<view class="" style="display: flex;flex-wrap: nowrap;justify-content: space-between;">
							<view v-for="(v,i) in list" :key="i" class="item flex-column text-center justify-center">
								<u-avatar :src="v.avatar"></u-avatar>
								<view class="mt5" style="color: #6a6783;font-weight: 600;">
									{{v.unickname}}
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="2">
						<view class="flexflex flex-end">
							<view class="flexflex flex-column text-center" @click="pullGroup()">
								<u-icon name="plus" size="38"></u-icon>
								<view class="mt5">
									邀请
								</view>
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<u-gap height="40" bgColor=""></u-gap>

			<view class="">
				<image
					src="https://img0.baidu.com/it/u=3689261662,2444785562&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					mode="widthFix"></image>
			</view>

			<!-- 弹框 -->
			<u-popup mode="bottom" :show="show" @close="close" @open="open" :closeable="true">
				<view class="slot margin mt20">
					<!--  -->
					<u-cell-group>
						<u-cell size="large" title="单元格" value="" v-for="(item, index) in friendList" :key="index">
							<view slot="title" class="u-slot-title flex-align">
								<view class="mr26">
									<u-avatar :src="item.avatar"></u-avatar>
								</view>
								<view class="text-bold size_16">
									{{ item.unickname }}
								</view>
							</view>
							<view class="" slot="value">
								<image v-if="!item.status" @click="addFriendIds(item.userid, item.status, index)"
									src="/static/img/message/msgnb.svg" mode="" style="width: 48rpx;height: 48rpx;">
								</image>
								<image v-else @click="addFriendIds(item.userid, item.status, index)"
									src="/static/img/message/54908.svg" mode="" style="width: 48rpx;height: 48rpx;">
								</image>


							</view>
						</u-cell>
					</u-cell-group>
					<!--  -->
					<view class="ms50 mt40">
						<button @click="bulidCircle(false)" v-if="friendIds.length == 0" class="laBtn1 ">
							<view class="word99">确定</view>
						</button>
						<button @click="bulidCircle(true)" v-else class="laBtn2 ">
							<view class="word88">确定</view>
						</button>
					</view>
				</view>
			</u-popup>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
				form: {
					id: null,
					name: null
				},
				friendList: [],
				friendIds: [],
			}
		},
		methods: {
			pullGroup() {
				this.open()
			},
			open() {
				this.show = true;
				this.groupList()
			},
			toGroupInfo() {
				uni.navigateTo({
					url: `/pages/chatInfo/chatInfo?data=${encodeURIComponent(JSON.stringify(this.form))}`
				})
			},
	
			async bulidCircle(isFlag) {
				if (isFlag) {
					let userId = this.friendList.filter(obj => obj.status == true).map(i => i.userid)
					let data = {
						"teamId": this.form.groupId,
						"userIds": userId
					}
					let re = await this.$API.friendApi.groupPullNumber()
					this.close()
				} else {
					uni.showToast({
						title: '请选择好友',
						icon: "none"
					})
				}
			},
			async getList() {
				let re = await this.$API.friendApi.groupNumberList(this.form.groupId)
				this.list = re
			},
			async groupList() {
				let re = await this.$API.friendApi.friendList()
				this.friendList = re?.list.map((i) => {
					i.status = false
					return i
				})
			},
			addFriendIds(id, status, index) {
				this.friendList = this.friendList.map(i => {
					if (i.userid == id) {
						i.status = !i.status;
						if (i.status === true) {
							this.friendIds.push(id);
						} else {
							this.friendIds = this.friendIds.filter((i) => {
								return i != id
							})
						}
					}
					return i;
				});
				//去除重复
				this.friendIds = [...new Set(this.friendIds)];
			},
			async groupPullNumber(id) {
				let data = {
					"teamId": "string",
					"userIds": [
						"string"
					]
				}
				let re = await this.$API.friendApi.groupPullNumber(data)
				this.list = re
			},
			close() {
				this.show = false;
				this.friendIds = [];
			},
		},
		onLoad(options) {
			if (options.data) {
				//
				let decodeURIComponentData = options.data
				//
				let data = JSON.parse(decodeURIComponent(decodeURIComponentData));
				this.form = data
			}
		},
		onShow() {
			this.getList()
			this.groupList()
		},
	}
</script>

<style lang="scss" scoped>

</style>